<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>头像修改</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            background-color: black;
            text-align: center;
        }

        #crop_btn {
            color: white;
            background-color: #836FFF;
            height: 40px;
            display: inline-block;
            line-height: 40px;
            width: 110px;
            text-align: center;
            border-radius: 2px;
        }

        button{
            appearance: none;
            -webkit-appearance: none;
            border: 0;
            background: none;
        }

        #crop_circle_btn {
            color: white;
            background-color: #836FFF;
            height: 40px;
            line-height: 40px;
            width: 110px;
            text-align: center;
            border-radius: 2px;
            display: inline-block;
            margin-left: 20px;
        }

        #crop_circle_btn:active,#crop_btn:active{
            background-color: #6854e4;
        }
    </style>
</head>
<body>
     <img src="./asset/test.png" style="display: none;">
    <div id="crop_result" style="text-align: center;width: 100%; padding-top: 30px; height: 400px; line-height: 400px;"><span><img id="headimg" style="display: block;margin: 0 auto" src="" alt="" /></span></div>
    <button class="btn" id="crop_btn">更换图片</button>
    <script src="./asset/transform.js"></script>
    <script src="./asset/alloy-finger.js"></script>
    <script src="alloy-crop.js"></script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/app.js"></script>
    <script>
    	var imageapi=JSON.parse(localStorage.image);
//  	alert(imageapi.width+','+imageapi.height);
//  	method=imageapi.method;//应用模块
//  	imgid=imageapi.imgid;//触发的divid
//  	act=imageapi.act;//应用方法
//  	tid=imageapi.tid;//主题id
//  	src=imageapi.src;//原图
//  	width=imageapi.width||200;//裁剪后的图片宽
//  	height=imageapi.height||200;//裁剪后的图片高
    	var headimg= document.getElementById('headimg');
    	headimg.src=imageapi.src;
    	mui.plusReady(function(){
    		document.getElementById("crop_btn").addEventListener('tap', function() {
                	openImg(headimg);//点击头像的时候触发          
                    });
    		openImg(headimg);
    	function openImg(thisid){
    		if (mui.os.plus) {  
                var a = [{  
                    title: "拍照"  
                }, {  
                    title: "从手机相册选择"  
                }];  
                plus.nativeUI.actionSheet({  
                    title: "修改用户头像",  
                    cancel: "取消",  
                    buttons: a  
                }, function(a) { /*actionSheet 按钮点击事件*/  
                    switch (a.index) {  
                        case 0:mui.back();break;
                        case 1:getImage();break; /*拍照*/  
                        case 2:appendByGallery();/*打开相册*/  
                    }  
                })  
            }
    	};
    	// 拍照添加文件
   function getImage() {
    var cmr = plus.camera.getCamera(); 
    cmr.captureImage( function ( p ) {     
        plus.io.resolveLocalFileSystemURL( p, function ( entry ) {
//      	       if(files.length<2){
                  var localurl = entry.toLocalURL();//把拍照的目录路径，变成本地url路径，例如file:///........之类的。
                  appendFile(localurl);
//                  } 
                });   
    },function( error ) {
            alert( "Capture image failed: "+error.message );
        }  
    );   
} 
// 从相册添加文件 
function appendByGallery(){
    plus.gallery.pick(function(path){
	appendFile(path);//处理图片的地方
    });
}

function checkImg(img_pach){
	if(img_pach.indexOf("/")>0)//如果包含有"/"号 从最后一个"/"号+1的位置开始截取字符串
{
    img_pach=img_pach.substring(img_pach.lastIndexOf("/")+1,img_pach.length);
}
var index= img_pach.indexOf("."); //得到"."在第几位
img_type=img_pach.substring(index+1); //截断"."之前的，得到后缀
return img_type;
   }
// 添加文件
//var f1=null;
function appendFile(path){
headimg.style.display='none';//关闭头像显示
	var imgtype=checkImg(path);//获得文件后缀
	if(imgtype==="jpeg" || imgtype==="jpg" || imgtype==="bmp" || imgtype==="png"){//判断格式是否符合//
		if(imgtype === "jpg" || imgtype === "jpeg"){//判断图片类型
		imgtype='jpeg';
		}else{
			imgtype ="jpeg";//压缩只支持jpeg 所以这里png和别的格式的我也改成了jpeg
		}
		caijian(path);
}else{
alert("格式不正确,请上传gif/jpeg/jpg/png/格式图片");
return false;	
}
}
});
//图片裁剪
function caijian(path) {
    	crop_result=document.getElementById('crop_result');
    	var abc= new AlloyCrop({//方形
                        image_src:path,
                        width:imageapi.width,
                        height:imageapi.height,
                        output: 1,
                        ok: function (base64, canvas) {
                        	crop_result.innerHTML='';//清除原图片
                        	//进入 //base64相片数据        
//                      	crop_result.innerHTML=canvas;//清除原图片
                            crop_result.appendChild(canvas);
                            crop_result.querySelector("canvas").style.borderRadius = "0%";
                            upload(base64);//把数据返回给操作页面
                        },
                        cancel: function () {
                        	//返回
                         mui.back();
                         return false;
                        },
                         ok_text: "确认",
                         cancel_text: "取消"
          });
    }
// 返回数据
function upload(base64){
		mui.back();
		var list = plus.webview.currentWebview().opener();
//	触发父页面的自定义事件(renovate),从而返回父页面更新,并且传递参数新图片值和id值
				mui.fire(list, 'renovate',{image:base64});
				//返回true,继续页面关闭逻辑
				return true;

}
    </script>

</body>
</html>
